// importM
import 'package:flutter/material.dart';

// ignore: unused_import
import './MyIcon.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter App", style: TextStyle(color: Colors.white)),
          backgroundColor: Colors.deepPurple,
        ),
        body: FlexBox2(),
      ),
    );
  }
}

// 横轴排序
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.black12,
      child: Row(
        // 外部没有Container 行自适应
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          IconContainer(MyIcon.apex, iconColor: Colors.red),
          IconContainer(MyIcon.warframe, iconColor: Colors.black45),
          IconContainer(MyIcon.epic, color: Colors.black),
        ],
      ),
    );
  }
}

// 竖轴排列
class VerticalAxis extends StatelessWidget {
  const VerticalAxis({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.black12,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          IconContainer(MyIcon.apex, iconColor: Colors.red),
          IconContainer(MyIcon.warframe, iconColor: Colors.black45),
          IconContainer(MyIcon.gitlab, iconColor: Colors.red),
        ],
      ),
    );
  }
}

// flex 弹性布局
class FlexBox extends StatelessWidget {
  const FlexBox({super.key});

  @override
  Widget build(BuildContext context) {
    return Flex(
      // Axis.horizontal 水平 / vertical 垂直
      direction: Axis.horizontal,
      children: [
        Expanded(
          flex: 1,
          child: IconContainer(MyIcon.apex, iconColor: Colors.red),
        ),
        Expanded(
          flex: 5,
          child: IconContainer(MyIcon.epic, color: Colors.black),
        ),
      ],
    );
  }
}

//flex 弹性布局 竖轴
class FlexBox1 extends StatelessWidget {
  const FlexBox1({super.key});
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          flex: 2,
          child: IconContainer(MyIcon.apex, iconColor: Colors.red),
        ),
        Expanded(
          flex: 1,
          child: IconContainer(MyIcon.epic, color: Colors.black),
        ),
      ],
    );
  }
}

// flex 弹性布局2
class FlexBox2 extends StatelessWidget {
  const FlexBox2({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Container(width: double.infinity, height: 180, color: Colors.black),
        SizedBox(
          width: double.infinity,
          height: 180,
          child: Row(
            children: [
              Expanded(
                flex: 2,
                child: SizedBox(
                  height: 180,
                  child: Image.network(
                    "https://www.itying.com/images/flutter/1.png",
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: SizedBox(
                  height: 180,
                  child: Column(
                    children: [
                      Expanded(
                        flex: 1,
                        child: SizedBox(
                          width: double.infinity,
                          child: Image.network(
                            "https://www.itying.com/images/flutter/2.png",
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                      SizedBox(height: 10),
                      Expanded(
                        flex: 1,
                        child: SizedBox(
                          width: double.infinity,
                          child: Image.network(
                            "https://www.itying.com/images/flutter/3.png",
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

// 封装
class IconContainer extends StatelessWidget {
  final Color color;
  final IconData icon;
  final Color iconColor;

  const IconContainer(
    this.icon, {
    super.key,
    this.color = Colors.white,
    this.iconColor = Colors.white,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: color,
      child: Icon(icon, color: iconColor, size: 50),
    );
  }
}
